<template>
    <div class="core-advantages">
        <div class="core-advantages-item" v-for="item in coreAdvantagesList" :key="item.title">
            <img :src="item.img" alt="">
            <h4 class="">{{ item.title }}</h4>
            <p class="">{{ item.desc }}</p>
        </div>
        
    </div>
</template>
<script setup lang="ts">
    interface CoreAdvantagesItem {
        img: string
        title: string
        desc: string
    }
    const coreAdvantagesList: CoreAdvantagesItem[] = [
        {
            img: '/public/icon/user.png',
            title: '用户活跃',
            desc: '10w+活跃用户'
        },
        {
            img: '/public/icon/chat.png',
            title: '讨论丰富',
            desc: '每日高质量话题不断'
        },
        {
            img: '/public/icon/book.png',
            title: '资源齐全',
            desc: '涵盖多领域优质资源'
        },
        {
            img: '/public/icon/rocket.png',
            title: '成长陪伴',
            desc: '专业陪跑，助力共同进步'
        }
    ]
</script>

<style lang="scss" scoped>
.core-advantages {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    height: 10.375rem;
    padding-right: 1rem;
    padding-left: 1rem;
    gap: 1.5rem;

    .core-advantages-item {
        width: 9.75rem;
        height: 10.375rem;
        padding-top: 2.0625rem;
        padding-right: 0.625rem;
        padding-bottom: 2.0625rem;
        padding-left: 0.625rem;
        border-radius: 1.2rem;
        border-width: 1px;
        border: 1px solid #F3F4F6;
        box-shadow: 0px 0.125rem 0.5rem 0px #0F172A0A;
        text-align: center;
        img {
           
            padding-bottom: 0.75rem;
        }
        h4 {
            font-family: Inter;
            font-weight: 600;
            font-size: 1.125rem;
            line-height: 1.75rem;
            letter-spacing: 0%;
            color: #222222;
        }
        p {
            font-family: Inter;
            font-weight: 400;
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: #6B7280;
        }
    }
}
</style>